// 自定义指令
// 1. 直接在main.js中注册使用
// Vue.directive('foo', {
//     inserted (el) {
//       // console.log(el)
//       // van-search 组件是div里面包含input,想要获取input，
//       el.querySelector('input').focus()
//     }
//   })
// 2. 封装方法,导出一个对象,导出对象，必须使用install方法，然后在main.js中使用Vue.use(diretivesObj)

// 3. 封装方法，导出一个函数,在main.js中使用Vue.use(diretive)
// export default function (Vue) {
//   Vue.directive('foo', {
//     inserted (el) {
//       el = el.querySelector('input')
//       el.focus()
//     }
//   })
// }

// 4. 局部注册自定义指令
// directives: {
//     foo: {
//       inserted(el){
//          el.focus();
//       }
//   }
// }
import Vue from 'vue'
export const diretivesObj = {
  // 指令所在标签，插入到真正的DOM时
  install () {
    Vue.directive('foo', {
      // 指令所在标签，插入到DOM时
      inserted (el) {
        // console.log(el)
        // 如果直接时input标签或者textarea标签，直接调用focus
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          el.focus()
        } else {
          // 如果是vant组件中div里面的input标签或者textarea标签
          const ipt = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          if (ipt || textArea) {
            ipt && ipt.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      },
      // 指令所在标签，进行更新时
      update (el) {
        // 如果直接时input标签或者textarea标签，直接调用focus
        if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
          el.focus()
        } else {
          // 如果是vant组件中div里面的input标签或者textarea标签
          const ipt = el.querySelector('input')
          const textArea = el.querySelector('textarea')
          if (ipt || textArea) {
            ipt && ipt.focus()
            textArea && textArea.focus()
          } else {
            // 本身也不是, 子标签里也没有
            console.error('请把v-fofo用在输入框标签上')
          }
        }
      }
    })
  }
}
export default diretivesObj
// hljs对象
// 自定义一个代码高亮指令
// Vue.directive('highlight', function (el) {
//   const highlight = el.querySelectorAll('pre,code') // 获取里面所有pre或者code标签
//   highlight.forEach((block) => {
//     hljs.highlightElement(block) // 突出显示这些标签(以及内部代码, 会自动识别语言)
//   })
// })
